import React from 'react';
import { useParams, useLocation, useNavigate } from 'react-router-dom';
import { ArrowLeft, Pill, AlertTriangle, Info } from 'lucide-react';

interface MedicineData {
  medicineName: string;
  medicineDescription: string;
}

export default function MedicineDetailPage() {
  const { medicineId } = useParams();
  const location = useLocation();
  const navigate = useNavigate();
  const medicineData = location.state as MedicineData;

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 头部 */}
      <div className="bg-white shadow-sm">
        <div className="flex items-center px-4 py-3">
          <button
            onClick={handleBack}
            className="mr-3 p-2 hover:bg-gray-100 rounded-full transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-lg font-semibold text-gray-900">
            {medicineData?.medicineName || '药品详情'}
          </h1>
        </div>
      </div>

      {/* 药品信息 */}
      <div className="p-4">
        <div className="bg-white rounded-lg shadow-sm p-6 mb-4">
          <div className="flex items-center space-x-3 mb-4">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
              <Pill className="text-blue-600" size={24} />
            </div>
            <div>
              <h2 className="text-xl font-bold text-gray-900">
                {medicineData?.medicineName || '药品名称'}
              </h2>
              <p className="text-sm text-gray-500">处方药</p>
            </div>
          </div>
          
          <p className="text-gray-600 mb-6">
            {medicineData?.medicineDescription || '药品描述信息'}
          </p>
          
          {/* 药品基本信息 */}
          <div className="space-y-4">
            <div className="flex items-center space-x-3">
              <Info className="text-gray-400" size={20} />
              <span className="text-gray-700">规格：10mg × 30片</span>
            </div>
            <div className="flex items-center space-x-3">
              <Info className="text-gray-400" size={20} />
              <span className="text-gray-700">用法：口服，每日2次</span>
            </div>
            <div className="flex items-center space-x-3">
              <Info className="text-gray-400" size={20} />
              <span className="text-gray-700">贮藏：密封保存</span>
            </div>
          </div>
        </div>

        {/* 适应症 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-4">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">适应症</h3>
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span className="text-gray-700">缓解疼痛症状</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span className="text-gray-700">治疗相关疾病</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span className="text-gray-700">预防疾病复发</span>
            </div>
          </div>
        </div>

        {/* 注意事项 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-4">
          <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
            <AlertTriangle className="text-orange-500 mr-2" size={20} />
            注意事项
          </h3>
          <div className="space-y-3">
            <div className="p-3 bg-orange-50 border border-orange-200 rounded-lg">
              <p className="text-orange-800 text-sm">
                请在医生指导下使用，严格按照医嘱服用
              </p>
            </div>
            <div className="p-3 bg-orange-50 border border-orange-200 rounded-lg">
              <p className="text-orange-800 text-sm">
                如有不良反应，请立即停止使用并咨询医生
              </p>
            </div>
            <div className="p-3 bg-orange-50 border border-orange-200 rounded-lg">
              <p className="text-orange-800 text-sm">
                孕妇、哺乳期妇女慎用
              </p>
            </div>
          </div>
        </div>

        {/* 价格信息 */}
        <div className="bg-white rounded-lg shadow-sm p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">价格信息</h3>
          <div className="flex items-center justify-between">
            <div>
              <span className="text-2xl font-bold text-red-600">¥25.80</span>
              <span className="text-sm text-gray-500 ml-2">/盒</span>
            </div>
            <button className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
              立即购买
            </button>
          </div>
        </div>
      </div>
    </div>
  );
} 